<!-- @format -->

<template>
    <div class="ma-content-block  p-4" style="height: 88vh">
		<div class='flex align_center' style="margin-bottom:16px">
            <div>时间筛选：</div>
            <div style="margin-right:16px">
                <a-button :type="timeType == 1?'primary':'dashed'" @click="handlleTime(1)">按月</a-button>
            </div>
            <div style="margin-right:16px">
                <a-button :type="timeType == 2?'primary':'dashed'" @click="handlleTime(2)">按年</a-button>
            </div>
            <div style="margin-right:16px">
                <a-button :type="timeType == 3?'primary':'dashed'" @click="handlleTime(3)">自定义</a-button>
            </div>
            <a-range-picker
                :mode="timeType == 1?'month':timeType == 2?'year':'date'"
                :show-time = "timeType == 3?true:false"
                :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
                format="YYYY-MM-DD HH:mm"
                v-model="form.process_time"
                @change="onSelect"
                style="width: 354px;margin-right: 24px;"
            />
            <a-button style="margin-right:16px" type="primary"  @click="handleSearch"> 搜索 </a-button>
            <a-button style="margin-right:16px" type="primary"  @click="handleResetting"> 重置 </a-button>
            <a-button type="primary"  @click="handleExports"> 导出</a-button>
        </div>

        <a-table 
        ref="exportTableRef" :columns="columns"
        :column-resizable="true" :data="tableData" :scroll="{y:600 }"
        :table-layout-fixed="true" :bordered="{wrapper: true, cell: true}" :pagination="false"
            >
            
        </a-table>

        <div style="padding-bottom: 2%"></div>
        <!-- 加载中... -->
        <div
            v-if="loading"
            style="
            position: fixed;
            width: 100vw;
            height: 100vh;
            background: #F2F3F5;
            z-index: 1000;
            display: flex;
            top: 0;
            left: 0;
            justify-content: center;
            align-items: center;
            "
        >
            <a-spin dot :size="10" />
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted,onActivated } from "vue";
import { request } from "@/utils/request.js";
import { Message } from "@arco-design/web-vue";
import { Notification } from "@arco-design/web-vue";
import {dateFormat} from '@/utils/util.js'
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
import { ElMapExportTable } from "table-excel";
import tool from "@/utils/tool";
import * as common from "@/utils/common";
import commonApi from "@/api/common";
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const timeType = ref(1)
const time = ref('')
const fadaoList = ref([
    {key:1,value:'集装箱'},
    {key:2,value:'整车'},
    
])
const transportList = ref()
const newDate = new Date();
// 当天
const newDay = newDate.getDate();  
// 当年
const newYear = newDate.getFullYear();
// 当月
const newMonth = (newDate.getMonth() + 1)>9?(newDate.getMonth() + 1):'0' + (newDate.getMonth() + 1);
const price_typeList = ([])
const tableData = ref([])
const dept_list = ref([])
const exportData = ref([])
const price_list = ref([])
const payTypeList = ref([
    {
        title:'预付款',
        value:'money'
    },
    {
        title:'周期结算',
        value:'periodic'
    },
    {
        title:'现结',
        value:'now_pay'
    },
])

const tableColumns = ref([
    {title:`${newYear}年${newMonth}月${newDay}日`,children:[
        {title:'序号',dataIndex:'xuhao'},
        {title:'办理时间',dataIndex:'process_time'},
        {title:'到达时间',dataIndex:'come_time'},
        {title:'客户名称',dataIndex:'dept_name'},
        {title:'车号',dataIndex:'car_no'},
        {title:'原票号',dataIndex:'ticket_number'},
        {title:'集装箱',dataIndex:'box'},
        {title:'品名',dataIndex:'goods_name'},
        {title:'到站类型',dataIndex:'is_car'},
        {title:'运输方式',dataIndex:'transport_type'},
        {title:'发站',dataIndex:'producer'},
        {title:'到站',dataIndex:'come_address'},
        {title:'件数',dataIndex:'number'},
        {title:'标重',dataIndex:'bz_weight'},
        {title:'货重',dataIndex:'hz_weight'},
        {title:'计费重量',dataIndex:'jf_weight'},
        {title:'承运人重量',dataIndex:'cyr_weight'},
        {title:'收款方式',dataIndex:'pay_type'},
        {title:'支付时间',dataIndex:'pay_date'},
        {title:'合计金额',dataIndex:'total_price'},
    ]}
    
])
const form = ref({
    process_time:[],   // 办理时间
})
const handlleTime = (type) =>{
    time.value = ''
    timeType.value = type
}
const handlePayType = (e) => {
    let name = ''
    payTypeList.value.map((v,i)=>{
        if(v.value == e){
            name = v.title
        }
    })
    
    return name
}
const handleExports = ()=> {
      const instance = new ElMapExportTable(
        {
            column:tableColumns.value,
            data:exportData.value,
            setRowStyle({ data, columnIndex, rowIndex, type }) {
            if (type === "main") {
              return {
                height: 40,
              };
            }
          },
        },
        // {progress: progress => console.log(progress)}
      );
      instance.download("威斯腾每日交接报表");
}
const handleSearch = ()=>{
    handleDataList()
}
const handleResetting = ()=>{
    form.value = {
        process_time:[],   // 办理时间
    }
    handleDataList()
}
const onSelect = (e)=>{
    if(timeType.value == 1){
        let month = e[1].split('-')[1]
        let nian = e[1].split('-')[0]
        form.value.process_time = [e[0] + `-01 00:00:00`,e[1] + `${month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12?'-31':month == 4 || month == 6 || month == 9 || month == 11?'-30':nian % 4 == 0?'-29':'-28'} 23:59:59`]
    }else if(timeType.value == 2){
        form.value.process_time = [e[0] + `-01-01 00:00:00`,e[1] + `-12-31 23:59:59`]
    }else if(timeType.value == 3){
        form.value.process_time = e
    }
    
}
const handleDeptList = ()=>{
    request({
        url: 'system/dept/remote',
        method: 'post',
        data: {
        openPage: false,
        remoteOption: {
            filter: {
            type: ['=', 2],
            status: ['=',1]
            },
            select: ["id", "name"],
            sort: { id: "desc" }
        }
        }
    }).then(res => {
        dept_list.value = res.data
    })
}
onMounted(()=>{
   
    handleDeptList()
    handleDataList()
})
onActivated(()=>{
    handleDataList()
})
const handleDataList = (obj)=>{   // 获取台账数据
        loading.value = true
        setTimeout(() => {
            loading.value = false
            tableData.value = [
                {xuhao:'1',name:'配送成本',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
                {xuhao:'2',name:'干线成本',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
                {xuhao:'3',name:'装卸成本',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
                {xuhao:'4',name:'取送车费成本',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
                {xuhao:'5',name:'集装箱使用费',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
                {xuhao:'6',name:'集装箱延期使用费',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
                {xuhao:'7',name:'到账装卸费',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
                {xuhao:'8',name:'到接取送达费',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
                {xuhao:'9',name:'保险费',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
                {xuhao:'10',name:'货车延期占用费',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
                {xuhao:'11',name:'班列代理',price_zheng:"396.50",price_box: "305.00",totle: "700.00",},
            ]
        }, 1000)
        
}
const columns = ref([
    {
        title: '序号',
        dataIndex: 'xuhao',
        width:70,
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        },
    },
    {
        title: '项目',
        dataIndex: 'name',
        align:'center',
        width:200,
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        },
    },
    {
        title: '整车',
        dataIndex: 'price_zheng',
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        },
    },
    {
        title: '集装箱',
        dataIndex: 'price_box',
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        },
    },
    {
        title: '合计',
        dataIndex: 'totle',
        align:'center',
        ellipsis:true,
        tooltip:true,
        headerCellStyle:{
            background:'#F2F3F5',
            color:'#000'
        },
    },
    
    
    
])

</script>
<style>

</style>
<script>

export default { name: "financial:chengbenhuizong" };
</script>
